<template>
  <div class="content">
    <div class="centerbgs">
      <!-- <img class="topimgs" mode="widthFix" src="@/assets/images/yang/topimg.png" @click="startShake"> -->
      <div class="centersd">
        <div class="boxs">
          <img
            class="box"
            :class="transformStyle ? '' : 'pingchang'"
            mode="widthFix"
            src="@/assets/images/yang/hezi.png"
            @click="startShake"
            :style="{ transform: transformStyle }"
          />
          <div class="chouqian">
            <div class="chouimg" :class="chouqianClass">
              <img
                class="imggee"
                mode="widthFix"
                src="@/assets/images/yang/chouqian.png"
                @click="startShake"
              />

              <div class="posi" v-if="drawed == true">
                <div>{{ userIndex }}</div>
                <div>组</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="btnbox" @click="startShake">
      <!-- <div class="words">{{ start ? (isRolling ? '抽签中...' : '开始抽签') : (haschou ? '已抽过' : '等待抽签') }}</div> -->
      <div class="words btns" :class="start ? 'btn1' : 'btn2'">
        {{
          start
            ? isRolling
              ? "抽签中..."
              : "开始抽签"
            : drawed
            ? "已抽过"
            : "等待抽签"
        }}
      </div>
    </div>
  </div>
</template>

<script>
import { checkSign, setDraw, getGroup } from "@/api/index";
export default {
  data() {
    return {
      userIndex: "",
      drawed: false,
      transformStyle: "",
      chouqianStyle: {},
      chouqianClass: "",
      start: true,
      isRolling: false,
      haschou: false,
      rotationInterval: null,
    };
  },
  components: {},
  created() {
    checkSign({
      name: localStorage.getItem("select"),
    }).then((res) => {
      this.drawed = res.data.drawed;
      this.drawed ? (this.start = false) : (this.start = true);
      if (res.data.signed == false) {
        this.messages = "未签到";
      } else {
        if (this.drawed) {
        }
      }
      this.getcode();
    });

    if (localStorage.getItem("haschou")) {
      this.haschou = true;
      this.start = false;
    } else {
      this.haschou = false;
      this.start = true;
    }
  },
  methods: {
    setcode() {
      setDraw({
        name: localStorage.getItem("select"),
      }).then((res) => {
        this.drawed = true;
        this.start = false;
        this.getcode();
      });
    },
    getcode() {
      getGroup({
        name: localStorage.getItem("select"),
        id: "1",
      }).then((res) => {
        if (this.drawed) {
          this.userIndex = res.data.group;
          this.displayText = res.data.group;
        }
      });
    },
    startShake() {
      // if (this.isRolling) return;
      // if (this.drawed) {
      //     return
      // }
      this.start = true;
      this.isRolling = true;
      this.haschou = true;

      this.chouqianClass = [];
      // 1. 首先摇晃盒子动画
      const steps = [
        "translateY(-10px)",
        "translateY(10px)",
        "translateY(-5px)",
        "translateY(5px)",
        "translateY(0)",
      ];

      let delay = 0;
      steps.forEach((step, index) => {
        delay = 100 * index;
        setTimeout(() => {
          this.transformStyle = step;
        }, delay);
      });

      // 2. 摇晃结束后开始抽签动画
      setTimeout(() => {
        // 2.1 抽签图片上升并淡入 (1秒)
        this.chouqianClass = ["show"];

        // 2.2 上升结束后开始3D旋转 (约5秒)
        setTimeout(() => {
          this.chouqianClass = ["rotate"];
        }, 1000); // 等待上升动画完成
      }, 1000); // 等待摇晃动画完成
    },
    easeOutQuad(t) {
      return t * (2 - t);
    },
  },
  beforeDestroy() {
    if (this.rotationInterval) {
      cancelAnimationFrame(this.rotationInterval);
    }
  },
};
</script>

<style scoped lang="less">
.btns {
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

.btn1 {
  color: white;
  border: solid 4px red;
  transition: all 0.5s;
  background: linear-gradient(to bottom, #fc8b78, #c82c24);
}

.btn2 {
  color: white;
  transition: all 0.5s;
  border: solid 4px rgb(69, 69, 69);
  background: linear-gradient(to bottom, #c1c1c1, #696868);
}

.topimgs {
  width: 90%;
  display: block;
  margin: 0 auto;
}

.imggee {
  width: 100%;
  display: block;
}

.posi {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  width: 100%;
  font-size: 28px;
  color: #ffff00;
  font-weight: bold;
}

.shake-image {
  transition: transform 0.2s;
}

.shake {
  animation: shake 0.4s ease-in-out;
}

@keyframes shake {
  0%,
  100% {
    transform: translateY(0);
  }

  25% {
    transform: translateY(-10px);
  }

  50% {
    transform: translateY(10px);
  }

  75% {
    transform: translateY(-5px);
  }
}

.tan {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.6);
  border-radius: 10px;
  padding: 20px;
  width: 50%;
  color: white;
  text-align: center;
  border: solid 4px red;
  box-shadow: 0px 0px 20px rgba(255, 0, 0, 0.5);
}

.box {
  display: block;
  margin: 0 auto;
  transition: transform 0.1s ease;
}

.pingchang {
  animation: float 3s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

/* .floating-element {
} */

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }
}

@font-face {
  font-family: "abc";
  src: url("/static/adc.OTF") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.abc {
  font-family: "abc";
}

.centersd {
  position: fixed;

  width: 100%;

  bottom: 238px;
}

.positionsbb {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.pop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.btnbox {
  width: 260px;
  display: block;
  margin: 0 auto;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 120px;
}

.words {
  width: 150px;
  left: 0;
  color: white;
  text-align: center;
  font-size: 25px;
  margin: 0 auto;
  line-height: 50px;
  border-radius: 10px;
  border: solid 3px #fae654;
}

.boxs {
  position: relative;
  width: 90%;
  margin: 0 auto;
}

.wordbox2 {
  position: absolute;
  top: 50%;
  left: 0;
  color: black;
  font-size: 16vw;
  text-align: center;
  transform: translateY(-50%);
  width: 100%;
}

.positions {
}

.wordbox {
  position: absolute;
  bottom: 6%;
  left: 0;
  color: white;
  text-align: center;
  width: 100%;
}

.chouqian {
  position: absolute;
  width: 80px;
  justify-content: center;
  display: flex;
  justify-items: center;
  width: 100%;
  transform: translateY(-150px);
}

.chouimg {
  width: 80px;
  transform-style: preserve-3d;
  perspective: 1000px;
  will-change: transform;
  transform-origin: center center;
  opacity: 0;
  &.show {
    animation: showStick 1s ease-out forwards;
  }
  &.rotate {
    animation: rotateStick 5s ease-out forwards;
  }
  //   opacity: 0;
  /* 确保旋转中心正确 */
}

.shake {
  animation: shake 0.4s ease-in-out;
}

.tan {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.6);
  border-radius: 10px;
  padding: 20px;
  width: 50%;
  color: white;
  text-align: center;
  border: solid 4px red;
  box-shadow: 0px 0px 20px rgba(255, 0, 0, 0.5);
}

@font-face {
  font-family: "abc";
  src: url("/static/adc.OTF") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.abc {
  font-family: "abc";
}

.positionsbb {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.boxs {
  position: relative;
  width: 90%;
  margin: 0 auto;
}

.wordbox2 {
  position: absolute;
  top: 50%;
  left: 0;
  color: black;
  font-size: 16vw;
  text-align: center;
  transform: translateY(-50%);
  width: 100%;
}

.positions {
}

.wordbox {
  position: absolute;
  bottom: 6%;
  left: 0;
  color: white;
  text-align: center;
  width: 100%;
}

.chouqian {
  position: absolute;
  top: 0;
  width: 80px;
  justify-content: center;
  display: flex;
  justify-items: center;
  width: 100%;
}

.box {
  width: 56%;
  height: 100%;
  display: block;
  transition: transform 0.1s ease;
}

.centerbgs {
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  padding-top: 90px;
  box-sizing: border-box;
}

.content {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  /* background: url("@/assets/images/yang/bgg.png"); */
  background: url("@/assets/images/yang/bgg1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

@keyframes shake {
  0%,
  100% {
    transform: translateY(0);
  }

  25% {
    transform: translateY(-10px);
  }

  50% {
    transform: translateY(10px);
  }

  75% {
    transform: translateY(-5px);
  }
}
@keyframes showStick {
  0% {
    transform: translateY(150px);
    opacity: 1;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
@keyframes rotateStick {
  0% {
    transform: none;
    opacity: 1;
  }
  100% {
    transform: rotateY(calc(360 * 15deg));
    opacity: 1;
  }
}
</style>